<template>
    <div>
        <!-- <el-carousel indicator-position="none" style="height: 400px;">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index" style="height: 400px;">
                <el-image :src="item.imgUrl" fit="cover" />
            </el-carousel-item>
        </el-carousel> -->
        <!-- <div style="max-width: 1980px;max-height: 380px;margin: 0 auto;">
            <img style="width: 100%;max-height: 380px;" :src="bannerList[0].imgUrl" />
        </div> -->
        <section v-if="data != {}">
            <div style="width: 1000px;margin: 0 auto;">
                <div style="display: flex;flex-direction: column;align-items: start;margin-top: 20px;">
                    <span style="font-weight: bold;font-size: 18px;color: #006400;line-height: 18px;">
                        {{ name }}
                    </span>
                    <el-divider style="margin: 15px 0;" />
                    <el-row :gutter="0">
                        <el-col :span="24">
                            <section style="overflow: hidden;">
                                <div v-for="(v, k) in data" :key="k" v-show="k != 1" @click="gotoDetial(v)"
                                    class="personal-info-li"
                                    style="cursor: pointer;display: flex;justify-content: flex-start;margin-bottom: 10px;">
                                    <section>
                                        <el-image style="height: 160px;width: 320px;" :src="v.cover" fit="cover" />
                                    </section>
                                    <section style="padding: 2px 10px;flex: 1;">
                                        <div
                                            style="display: flex;justify-content: space-between;width: -webkit-fill-available;">
                                            <p class="personal-info-li-title font15 line1"
                                                style="font-weight: 400;font-size: 16px;color: #222226;line-height: 22px;text-align:left">
                                                {{ v.title }}</p>
                                            <span
                                                style="font-weight: 400;color: #999999;font-size: 14px;line-height: 22px;min-width: 180px;text-align: right;">
                                                {{ v.createdAt }}</span>
                                        </div>
                                        <div style="padding-top: 10px;">
                                            <p class="personal-info-li-title font15 line5"
                                                style="font-weight: 400;font-size: 14px;color: #999999;line-height: 22px;text-align:left">
                                                {{ v.summary }}</p>
                                        </div>
                                    </section>
                                </div>
                            </section>
                        </el-col>
                    </el-row>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
export default {
    // name: "home"
    data() {
        return {
            name: '',
            data: {},
            bannerList: [{
                imgUrl: require("@/assets/img/banner.png")
            }],
            indexCategoryId: 0
        }
    },
    // watch: {
    //     '$route.params.id': function(newVal, oldVal) {
    //     // 在这里处理参数变化的逻辑
    //         this.indexCategoryId = newVal
    //         this.getData()
    //     }
    // },
    created() {
        this.getData()
    },
    methods: {
        getData() {
            this.crud.get("/index-article/news/list", { page: 1, limit: 100, }).then(res => {
                this.name = res.data.data.indexCategoryName || ''
                this.data = res.data.data.list;
            })
        },
        gotoDetial(obj) {
            const routeUrl = this.$router.resolve(`/detial/index/${obj.id}`).href;
            window.open(routeUrl, '_blank')
        }
    },
    mounted() {
        if (!this.data.length) {
            this.indexCategoryId = +location.href.split('/').at(-1) || -1
            this.getData()
        }
    }
}

</script>
<style scoped>
.el-carousel__item h3 {
    display: flex;
    color: #475669;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
}

.el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
    background-color: #d3dce6;
}

.el-divider--horizontal {
    margin: 20px 0;
    background-color: #006400;
}

.el-row {
    margin: 0px !important;
    width: 100%;
}

.personal-info-box {
    overflow: hidden;

    .personal-info-ul {
        list-style: none;

        .personal-info-li {
            padding-bottom: 10px;

            .personal-info-li-title {
                display: inline-block;
                color: var(--el-text-color-secondary);
                text-decoration: none;
            }

            & a:hover {
                color: var(--el-color-primary);
                cursor: pointer;
            }
        }
    }

    .personal-edit-title {
        position: relative;
        padding-left: 10px;
        color: var(--el-text-color-regular);
        line-height: 22px;

        &::after {
            content: '';
            width: 4px;
            height: 18px;
            line-height: 22px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
            background: var(--el-color-primary);
            border-radius: 2px;
        }
    }
}

.line1 {
    white-space: nowrap;
    /* 确保文本在一行内显示 */
    overflow: hidden;
    /* 超出容器部分隐藏 */
    text-overflow: ellipsis;
    /* 超出部分显示省略号 */
}

.line5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
</style>
